<template>
  <div>
    <el-card class="box-card" style="margin-left: 100px;margin-top:40px;width: 1000px;height: 400px">
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <!--题型管理选项卡-->
        <el-tab-pane label="题型管理" name="type">
          <el-table
              :data="typeList"
              style="width: 100%">
            <el-table-column
                prop="value"
                label="数据字典值"
                width="160">
            </el-table-column>
            <el-table-column
                prop="address"
                label="操作"
                width="250">
              <template slot-scope="scope">
                <el-button type="warning" plain @click="updateDicValue(scope.row.id,scope.row.value)">修改</el-button>
                <el-button type="warning" plain @click="deleteDicValue(scope.row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <!--难度等级管理-->
        <el-tab-pane label="难度等级管理" name="difficult">
          <el-table
              :data="difficultList"
              style="width: 100%">
            <el-table-column
                prop="value"
                label="数据字典值"
                width="160">
            </el-table-column>
            <el-table-column
                prop="address"
                label="操作"
                width="250">
              <template slot-scope="scope">
                <el-button type="warning" plain @click="updateDicValue(scope.row.id,scope.row.value)">修改</el-button>
                <el-button type="warning" plain @click="deleteDicValue(scope.row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="科目管理" name="object">
          <el-table
              :data="objectList"
              style="width: 100%">
            <el-table-column
                prop="value"
                label="数据字典值"
                width="160">
            </el-table-column>
            <el-table-column
                prop="address"
                label="操作"
                width="250">
              <template slot-scope="scope">
                <el-button type="warning" plain @click="updateDicValue(scope.row.id,scope.row.value)">修改</el-button>
                <el-button type="warning" plain @click="deleteDicValue(scope.row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="添加" name="add">
          <div style="margin-top: 15px;">
            <el-input placeholder="请输入内容" v-model="addDicValueContent" class="input-with-select" style="width: 900px">
              <el-select v-model="selectDicType" slot="prepend" placeholder="请选择" style="width: 100px">
                <el-option :label="o.name" :value="o.code" v-for="o in this.dicTypeList" :key="index">
                </el-option>
              </el-select>
              <el-button slot="append" type="info" @click="addDicTypeBtn">添加</el-button>
            </el-input>
          </div>
        </el-tab-pane>
      </el-tabs>
      <!--分页组件-->
      <div class="block" v-show="showPagination" style="float:left;margin-left: 200px" >
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNo"
            :page-sizes="[3, 5]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
      </div>
    </el-card>
    <!--修改数据字典值弹窗-->
    <el-dialog title="修改" :visible.sync="dialogFormVisible" style="width: 1000px" >
      <el-input v-model="inputDicValue" placeholder="请输入内容"></el-input>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="sureUpdateDicValueBtn">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "adminUserCenter-manageDic",
  data(){
    return{
      typeList:[{
        id:'',value:'',order:'',type:''
      }],
      difficultList:[{
        id:'',value:'',order:'',type:''
      }],
      objectList:[{
        id:'',value:'',order:'',type:''
      }],
      pageNo: 1, //当前页数
      pageSize: 3, //显示条数
      total: 0, //总条数
      showPagination: true, //分页栏是否显示
      inputDicValue:'',
      dialogFormVisible:false,
      dicValueId:'',
      dicTypeList:[{ //添加中数据字典类型下拉菜单
        id:'',code:'',name:'',description:''
      }],
      selectDicType:'',//选择的数据字典类型
      addDicValueContent:'',//添加的数据字典内容
    }
  },
  methods:{
    //切换选项卡，题型管理，难度等级管理等
    handleClick(tab, event) {
      if(this.activeName=='add'){
        this.showPagination=false;
        this.getDicType();
      }else{
        this.total=0;
        this.pageNo=1;
        this.pageSize=3;
        this.showPagination=false;
        this.getDicValue();
        console.log(tab, event);
      }

    },
    //分页相关
    handleSizeChange(val) {
      this.pageSize=val;
      this.pageNo=1;//当切换一页显示几个的时候，我们要把页码切换第一页
      this.getDicValue();
      //console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.pageNo=val;
      this.getDicValue();
      //console.log(`当前页: ${val}`);
    },
    //获取题型、难度等级、科目等
    getDicValue(){
      if(this.activeName=='type'){
        this.$myAxios('/adminUserCenter/getDicTypeJ','post',{
          pageNo:(this.pageNo - 1) * this.pageSize,
          pageSize:this.pageSize
        },resp=>{
          console.log(resp)
          this.typeList=resp.data.data.dicTypeList;
          this.total=resp.data.data.total;
          if(this.typeList==0){
            this.showPagination=false;
          }else{
            this.showPagination=true;
          }
        })
      }else if(this.activeName=='difficult'){
        this.$myAxios('/adminUserCenter/getDicDifficultJ','post',{
          pageNo:(this.pageNo - 1) * this.pageSize,
          pageSize:this.pageSize
        },resp=>{
          this.difficultList=resp.data.data.dicDifficultList;
          this.total=resp.data.data.total;
          if(this.difficultList==0){
            this.showPagination=false;
          }else{
            this.showPagination=true;
          }
        })
      }else if(this.activeName=='object'){
        this.$myAxios('/adminUserCenter/getDicObjectJ','post',{
          pageNo:(this.pageNo - 1) * this.pageSize,
          pageSize:this.pageSize
        },resp=>{
          this.objectList=resp.data.data.dicObjectList;
          this.total=resp.data.data.total;
          if(this.objectList==0){
            this.showPagination=false;
          }else{
            this.showPagination=true;
          }
        })
      }
    },
    //修改数据字典的值
    updateDicValue(id,value){
      this.dialogFormVisible=true;
      this.inputDicValue=value;
      this.dicValueId=id;

    },
    //修改数据字典值确定按钮
    sureUpdateDicValueBtn(){
      this.$myAxios('/adminUserCenter/updateDicValueJ','post',{
        id:this.dicValueId,
        value:this.inputDicValue
      },resp=>{
        this.$message({
          type: 'success',
          message: '修改成功!'
        });
        this.getDicValue();
        this.dialogFormVisible=false;
      })
    },
    //删除数据字典
    deleteDicValue(id){
      this.$confirm('此操作将删除该数据字典, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$myAxios('/adminUserCenter/deleteDicValueJ','post',{
          id:id
        },resp=>{
          this.getDicValue();
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //获取数据字典类型下拉菜单里的值
    getDicType(){
      this.$myAxios('/adminUserCenter/getDicTypeListJ','post',null,resp=>{
        this.dicTypeList=resp.data.data
      })
    },
    //添加数据字典类型确定方法
    addDicTypeBtn(){
      if(this.selectDicType=='' || this.selectDicType==null){
        this.$message({
          type: 'error',
          message: '请选择类型'
        });
      }else if(this.addDicValueContent==null || this.addDicValueContent==''){
        this.$message({
          type: 'error',
          message: '请输入内容'
        });
      }
      else{
        alert(this.selectDicType+","+this.addDicValueContent)
        this.$myAxios('/adminUserCenter/addDicValueJ','post',{
          type:this.selectDicType,
          value:this.addDicValueContent
        },resp=>{
          this.$message({
            type: 'success',
            message: '添加成功'
          });
          this.selectDicType=null;
          this.addDicValueContent=null;
        })
      }
    },
    //加载页面时执行的方法
    loadFunction(){
      this.activeName='type';
      this.getDicValue();
    },
  },
  created() {
    this.loadFunction();
  }
}
</script>

<style scoped>

</style>